<template>
  <div class="info">
    <div class="infoContainer">
      <el-main style="width:calc(100vm-2.8rem)">
      <!-- 表单头部 -->
      <div class="top">
        <el-button type="primary">导出EXCEL</el-button>
      </div>
      <!-- 表单区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="name" label="姓名" height= "0.45rem"></el-table-column>
        <el-table-column prop="date" label="单位"></el-table-column>
        <el-table-column prop="address" label="职务"></el-table-column>
        <el-table-column prop="address" label="行业"></el-table-column>
        <el-table-column prop="address" label="手机号"></el-table-column>
        <el-table-column prop="address" label="邮箱"></el-table-column>
        <el-table-column prop="address" label="微信ID"></el-table-column>
        <el-table-column prop="address" label="联系地址"></el-table-column>
        <el-table-column prop="address" label="邮编"></el-table-column>
        <el-table-column prop="address" label="收藏"></el-table-column>
        <el-table-column prop="address" label="加入线下观展计划"></el-table-column>
        <el-table-column prop="address" label="预约线下洽谈"></el-table-column>
        <el-table-column prop="address" label="预约技术交流讲座"></el-table-column>
        <el-table-column prop="address" label="预约线上会议"></el-table-column>
        <el-table-column prop="address" label="预约线上直播"></el-table-column>
      </el-table>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  }
};
</script>
<style scoped lang='less'>
.info {
  .infoContainer {
    width: auto;
    // width: 100%;
    height: 7.69rem;
    background: #eeeeee;
    .top {
      height: 0.71rem;
      // background: violet;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}
.el-button--primary {
  background: #004cb3;
  width: 1.1rem;
  height: 0.4rem;
  border-radius: 0.05rem;
  margin-left: 0.2rem;
}
.el-button {
  font-size: 0.16rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
.el-table .cell {
  font-size: 0.14rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  width: 0.57rem;
  
}
/deep/.el-table thead{
  font-size:0.14rem;
font-family:Microsoft YaHei;
font-weight:bold;
color:rgba(51,51,51,1);
}
/deep/table.el-table__header{
  background: chartreuse;
}
</style>
